<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <!-- 显示输入的内容，但此处被注释掉 -->
        <!-- <p>输入的内容是：{{msg}}</p>
        <input type="text" name="" id="" value="" v-model="msg"/><br /> -->
        <!-- 显示选择的单选按钮选项 -->
        <p>选择的选项是：{{picked}}  {{checked}}</p>
        <!-- 第一个单选按钮，值为"js"，根据 checked 的值决定是否默认选中，与 picked 数据双向绑定 -->
        <input type="radio" name="" id="" value="js" :checked="checked" v-model="picked"/>js
        <!-- 其他单选按钮，值分别为"html"和"css"，与 picked 数据双向绑定 -->
        <input type="radio" name="" id="" value="html" v-model="picked"/>html
        <input type="radio" name="" id="" value="css" v-model="picked"/>css
        <!-- 显示选择的复选框选项 -->
        <p>你的爱好是：{{pickedbox}}</p>
        <!-- 多个复选框，值分别为不同的爱好，与 pickedbox 数据双向绑定 -->
        <input type="checkbox" name="" id="" value="旅游"  v-model="pickedbox"/>旅游
        <input type="checkbox" name="" id="" value="看电影" v-model="pickedbox"/>看电影
        <input type="checkbox" name="" id="" value="游泳" v-model="pickedbox"/>游泳
        <input type="checkbox" name="" id="" value="跑步" v-model="pickedbox"/>跑步
        <!-- 显示选择的年龄选项 -->
        <p>你的年龄是：{{selected}}</p>
        <!-- 下拉选择框，与 selected 数据双向绑定 -->
        <select name="" v-model="selected">
            <option value="18岁">18岁</option>
            <option value="18岁-30岁">18岁-30岁</option>
            <option value="30岁-40岁">30岁-40岁</option>
            <option value="40岁以上">40岁以上</option>
        </select>
    </div>
    <script src="../js/vue.js"></script>
    <script type="text/javascript">
        // 1、创建 Vue 实例
        var vm = new Vue({
            el: '#app',  // 指定 Vue 实例挂载的元素
            data: {  // Vue 中的数据
                msg: '',  // 输入框的初始值
                checked: true,  // 第一个单选按钮的初始选中状态
                picked: "js",  // 初始选中的单选按钮值
                pickedbox: [],  // 选中的复选框的值的数组
                selected: "18岁"  // 下拉选择框的初始选中值
            }
        });
    </script>
</body>
</html>